<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.ok {
	color: green;
}

.error {
	color: red;
}
</style>
<script>
	//验证账号的格式
	function checkCode() {
		console.log(1);
		//从文本框中获取账号
		var code = document.getElementById("code").value;
		//获取span
		var span = document.getElementById("codemsg");
		//写正则表达式判断账号的格式
		var reg = /^\w{5,10}$/;
		if (reg.test(code)) {
			//正确，将span内的文字设置为绿色
			span.className = "ok";
			return true;
		} else {
			//错误，将span内的文字设置为红色
			span.className = "error";
			return false;
		}
	}
	//验证密码格式
	function checkPwd() {
		var pwd = document.getElementById("pwd").value;
		var span = document.getElementById("pwdmsg");
		var reg = /^\w{10,20}$/;
		if (reg.test(pwd)) {
			span.className = "ok";
			return true;
		} else {
			span.className = "error";
			return false;
		}
	}
</script>
</head>
<body>
	<form action="http://www.tmooc.cn"
		onsubmit="return checkCode()+checkPwd()==2;">
		<p>
			账号: <input type="text" id="code" onblur="checkCode();" /> <span
				id="codemsg">5-10位字母、数字、下划线</span>
		</p>
		<p>
			密码: <input type="password" id="pwd" onblur="checkPwd();" /> <span
				id="pwdmsg">10-20位字母、数字、下划线</span>
		</p>
		<p>
			<input type="submit" value="登录" />
		</p>
	</form>
</body>
</html>








